import React, { Component } from 'react'
import {Vote,SelectInter} from '../../types/vote'
import { DatePicker,Switch } from 'antd';

interface IState extends Vote{
    text:string,
    [propName:string]:any,
    isTureName:boolean
}

export default class CreateVote extends Component<{},IState> {
    state = {
        vid:-1,             //投票id
        title:'',           //标题
        con:'',             //描述
        items:[],           //选项
        endTime:'',         //结束时间
        createUser:'',      //创建投票的人
        voteUsers:[],       //投票人员列表
        text:'',             //添加选项的input
        isTureName:false    //是否匿名
        
    }
    render() {
        let {title,con,text,items} = this.state;
        return (
            <div>
                <div>
                    标题:<input type="text" value={title} name="title" onChange={this.change}></input><br/>
                    描述:<input type="text" value={con} name="con" onChange={this.change}></input><br/>
                    选项列表:
                    <ul>
                        {items.length && items.map((item:SelectInter,index) => <li key={item.id}>{item.text}  <button onClick={() => {this.del(index)}}>-</button></li>)}
                    </ul>
                    添加选项：<input type="text" value={text} name="text" onChange={this.change}></input> <button onClick={this.add}>添加</button><br/>
                </div>
                <div>
                    时间：<DatePicker showTime onChange={this.changeTime} /><br/>
                    是否匿名：<Switch defaultChecked={false} onChange={this.switch} />
                </div>
                <button onClick={this.complete}>完成</button>
            </div>
        )
    }

    //完成
    complete = () => {
        
    }

    //input  受控表单
    change = (e:any) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //添加选项
    add = () => {
        let {text,items} = this.state;
        this.setState({
            items:[...items,{text,num:0,id:items.length}],
            text:''
        })
    }

    //删除选项
    del = (index:number) => {
        let {items} = this.state;
        items.splice(index,1);
        this.setState({
            items
        })
    }

    changeTime = (value:any, dateString:string) => {
        console.log(dateString)
        this.setState({
            endTime:dateString
        })
    }

    switch = (checked:boolean) => {
        this.setState({
            isTureName:checked
        })
    }
}
